<template>
  <div>
    <Form :label-width="80" inline>
      <FormItem label="登录名">
        <Input @on-clear="getAllUser" v-model="map.work" clearable class="myform"/>
      </FormItem>
      <FormItem label="姓名">
        <Input @on-clear="getAllUser" v-model="map.name" clearable  class="myform"/>
      </FormItem>
      <FormItem label="学院">
        <Select @on-clear="getAllUser" v-model="map.collegeId"  clearable class="myform">
          <Option v-for="item in codeList.college"  :key="item.collegeId" :value="item.collegeId">
            {{ item.name }}
          </Option>
        </Select>
      </FormItem>
      <FormItem label="用户组">
        <Select @on-clear="getAllUser"  v-model="map.foreignKey"  clearable  class="myform" >
          <Option v-for="item in codeList.userGroup"  :key="item.codeId" :value="item.foreignKey">
            {{ item.codeName }}
          </Option>
        </Select>
        <Button icon="ios-search" type="success" @click="getAllUser" class="btn">查询 </Button>
      </FormItem>
    </Form>
    <Button
        class="mybtn1"
        icon="md-add-circle"
        @click="modal.addUserFalg = true"
        type="info"
    >添加
    </Button
    >
    <Table :loading="loading" border :columns="columns" :data="userData">
      <template slot-scope="{ row, index }" slot="action">
        <Button
            type="primary"
            icon="ios-build"
            size="small"
            style="margin-right: 5px"
            @click="(modal.updateUserFalg = true), Object.assign(modal.user, row)"
        >编辑
        </Button>
        <Poptip
            confirm
            transfer
            title="是否删除?"
            @on-ok="remove(row, index)"
            @on-cancel="$Message.info('已取消')"
        >
          <Button type="error" icon="md-trash" size="small">删除</Button>
        </Poptip>
      </template>
    </Table>
    <br/>
    <Page
        :total="total"
        :page-size="map.size"
        @on-change="changePage"
        @on-page-size-change="changePageSize"
        show-sizer
        show-total
        show-elevator
        transfer />
    <add-user :modal="modal"/>
    <update-user :modal="modal"/>
  </div>
</template>

<script>
import addUser from "@c/system/addUser";
import updateUser from "@c/system/updateUser";

export default {
  components: {addUser, updateUser},
  name: "user",
  data() {
    return {
      loading: false,
      codeList: [],
      modal: {
        addUserFalg: false,
        updateUserFalg: false,
        user: {},
      },
      map: {
        page: 1,
        size: 10,
        work: null,
        name: null,
        collegeId: null,
        foreignKey: null,
      },
      cropperFlag: false,
      columns: [
        {
          type: "index",
          width: 70,
          title: "序号",
          align: "center",
        },
        {
          title: "头像",
          align: "center",
          width: 70,
          render: (h, params) => {
            return params.row.avatarUrl != null ? (
                <Avatar
                    shape="square"
                    icon="ios-person"
                    src={params.row.avatarUrl}
                ></Avatar>
            ) : (
                <Avatar shape="square">{params.row.name.charAt(0)}</Avatar>
            );
          },
        },
        {
          title: "登录名",
          sortable: true,
          key: "work",
        },
        {
          title: "名称",
          sortable: true,
          key: "name",
        },
        {
          title: "学院",
          sortable: true,
          render: (h, params) => {
            return <span>{params.row.collegeDO.name}</span>;
          },
        },
        {
          title: "邮箱",
          sortable: true,
          key: "email",
        },
        {
          title: "电话",
          align: "center",
          sortable: true,
          width: 130,
          key: "telephone",
        },
        {
          title: "用户组",
          sortable: true,
          align: "center",
          render: (h, params) => {
            return (
                <div v-show={params.row.collegeCodeList != null}>
                  {params.row.collegeCodeList.map((m) => {
                    return <Tag color="warning">{m.codeName}</Tag>;
                  })}
                </div>
            );
          },
        },
        {
          title: "角色",
          sortable: true,
          align: "center",
          width: 93,
          render: (h, params) => {
            return (
                <Tag v-show={params.row.roleCode != null} color="geekblue">
                  {params.row.roleCode.codeName}
                </Tag>
            );
          },
        },
        {
          title: "状态",
          sortable: true,
          align: "center",
          width: 93,
          render: (h, params) => {
            return (
                <div
                    onClick={() => {
                      this.changStatue(params.row);
                    }}
                >
                  <i-switch
                      true-color="#13ce66"
                      false-color="#ff4949"
                      v-model={params.row.status}
                      size="large"
                  >
                    <span slot="open">开启</span>
                    <span slot="close">关闭</span>
                  </i-switch>
                </div>
            );
          },
        },
        {
          title: "操作",
          slot: "action",
          width: 175,
          align: "center",
        },
      ],
      userData: [],
      total: 0,
    };
  },
  methods: {
    getAllUser() {
      this.loading = true;
      this.http
          .post("/user/getAllUser", this.qs.parse(this.map))
          .then((res) => {
            if (res.data) {
              this.userData = res.data.list;
              this.total = res.data.total;
            }
          })
          .finally((f) => {
            this.loading = false;
          });
    },
    changStatue(row) {
      let data = {
        status: row.status,
        userId: row.userId,
      };
      this.http.put("/user/changStatue", this.qs.parse(data)).then((res) => {
        if (res.data) {
          this.$Message.success({
            background: true,
            content: "修改成功",
          });
        }
      });
    },
    remove(row, index) {
      this.http.delete(`/user/deleteUserById/${row.userId}`).then((res) => {
        if (res.data) {
          this.$Message.success({
            background: true,
            content: "删除成功",
          });
          this.userData.splice(index, 1);
        }
      });
    },
    changePage(val) {
      this.map.page = val;
      this.getAllUser();
    },
    changePageSize(val) {
      this.map.size = val;
      if (this.map.page === 1) {
        this.getAllUser();
      }
    },
    /**
     * 获取全部的角色、用户组、学院数据
     */
    getAllRoleAndUserGroupAndCollege() {
      this.http.get("/user/getAllRoleAndUserGroupAndCollege").then((res) => {
        if (res.data) {
          this.codeList = res.data;
        }
      });
    },
  },
  created() {
    this.getAllRoleAndUserGroupAndCollege();
    this.getAllUser();
  },
};
</script>

<style scoped>
.myform {
  width: 300px;
}

.btn {
  margin-left: 10px;
}
</style>
